<script lang="ts" setup>
import type { StateType } from './types';

import { computed } from 'vue';
import { useRoute } from 'vue-router';

import { Page } from '@vben/common-ui';
import { useTabs } from '@vben/hooks';

import { useTitle } from '@vueuse/core';
import {
  Card,
  message,
  Select,
  SelectOption,
  TabPane,
  Tabs,
} from 'ant-design-vue';
import dayjs from 'dayjs';
import { storeToRefs } from 'pinia';
import { pinyin } from 'pinyin-pro';

import { useVbenForm } from '#/adapter/form';
import { getPageInfo_news, postPage_news, putPage_news } from '#/api/portal/home';
import {  getPage as getPagenews } from '#/api/portal/news';
import { usePreferencesStore } from '#/store';

const route = useRoute();

const { setTabTitle, closeCurrentTab } = useTabs();

const index: any = computed(() => {
  return route.params?.id ?? -1;
});
const router = useRouter();

const routeMeta = router.currentRoute.value.meta;
const routeTitle = routeMeta.title.replace('管理', '');
const preferencesStore = usePreferencesStore();
const { title } = storeToRefs(preferencesStore);
const pageTitle =
  Number.parseInt(index.value, 10) === 0
    ? `新增${routeTitle}`
    : `No.${index.value} - 编辑${routeTitle}`;
setTabTitle(pageTitle);
useTitle(`${pageTitle} - ${title.value}`);

const disabled = ref(true);
const activeKey = ref('1');
const state: StateType = reactive({
  form: {
    title: '',
    left_title: '',
    left_des: '',
    left_image:[],
    right_top_images:[],
    right_top_title:'',
    right_top_des:'',
    right_bottom_images:[],
    right_bottom_title:'',
    right_bottom_des:'',
    news_id:0,
   
  },

  pageThemeFiles: [],
});
const newsOptions = ref([])

const onSearchNews = async (value) => {
  if (!value) {
    newsOptions.value = []
    return
  }

  const res = await getPagenews({ keyword: value })
  newsOptions.value = (res?.data?.list || []).map(item => ({
    label: item.news_title,
    value: item.id,
  }))
 
}

const [BasicForm, BasicFormApi] = useVbenForm({
  handleSubmit: onSubmit,
  resetButtonOptions: {
    show: false,
  },
  schema: [
    {
      component: 'Input',
      dependencies: {
        show: false,
        // 随意一个字段改变时，都会触发
        triggerFields: ['id'],
      },
      fieldName: 'id',
      label: 'ID',
    
    },
    {
      component: 'Input',
      defaultValue: '',
      dependencies: {
        trigger: (values) => {
          disabled.value = !values.title;
          state.form.left_images = values.left_images;
          state.form.left_title = values.left_title;
          state.form.left_des = values.left_des;
          state.form.right_top_images = values.right_top_images;
          state.form.right_top_title = values.right_top_title;
          state.form.right_top_des = values.right_top_des;
          state.form.right_bottom_images = values.right_bottom_images;
          state.form.right_bottom_title = values.right_bottom_title;
          state.form.right_bottom_des = values.right_bottom_des;
          state.form.news_id = values.news_id;
        },
        // 随意一个字段改变时，都会触发
        triggerFields: [
          'id',
          'left_images',
          'left_title',
          'left_des',

          'right_top_images',
          'right_top_title',
          'right_top_des',

          'right_bottom_images',
          'right_bottom_title',
          'right_bottom_des',
          'news_id'

        ],
      },
      componentProps: {
        placeholder: '请输入',
      },
      fieldName: 'title',
      label: `${routeTitle}标题`,
      rules: 'required',
    },
    
    {
        component: 'Select',
        fieldName: 'news_id',
        label: `${routeTitle}关联新闻`,
        defaultValue: '',
        componentProps: {
          allowClear: true,
          filterOption: false,
          showSearch: true,
          placeholder: '请输入新闻标题搜索',
          class: 'w-full',
          options: newsOptions.value, // ✅ 注意是 `.value`
          onSearch: onSearchNews,
        }
      },

 
    {
      component: 'Input',
      defaultValue: '',
      componentProps: {
        placeholder: '请输入',
      },
      fieldName: 'left_title',
      label: `${routeTitle}左标题`,
    },
    {
      component: 'Input',
      defaultValue: '',
      componentProps: {
        placeholder: '请输入',
      },
      fieldName: 'left_des',
      label: `${routeTitle}左描述`,
    },
    {
      component: 'Upload',
      defaultValue: '',
      componentProps: {
        placeholder: '请输入',
      },
      fieldName: 'left_images',
      label: `${routeTitle}左图片`,
    },




    {
      component: 'Input',
      defaultValue: '',
      componentProps: {
        placeholder: '请输入',
      },
      fieldName: 'right_top_title',
      label: `${routeTitle}右上标题`,
    },
    {
      component: 'Input',
      defaultValue: '',
      componentProps: {
        placeholder: '请输入',
      },
      fieldName: 'right_top_des',
      label: `${routeTitle}右上描述`,
    },
    {
      component: 'Upload',
      defaultValue: '',
      componentProps: {
        placeholder: '请输入',
      },
      fieldName: 'right_top_image',
      label: `${routeTitle}右上图片`,
    },



    {
      component: 'Input',
      defaultValue: '',
      componentProps: {
        placeholder: '请输入',
      },
      fieldName: 'right_bottom_title',
      label: `${routeTitle}右下标题`,
    },
    {
      component: 'Input',
      defaultValue: '',
      componentProps: {
        placeholder: '请输入',
      },
      fieldName: 'right_bottom_title',
      label: `${routeTitle}右下描述`,
    },
    {
      component: 'Upload',
      defaultValue: '',
      componentProps: {
        placeholder: '请输入',
      },
      fieldName: 'right_bottom_title',
      label: `${routeTitle}右下图片`,
    },
       
  ],
});



async function onSubmit() {
  function showMsg(msg: string) {
    message.success(msg);
    closeCurrentTab();
      router.push({
          name: `Homenews`,
     });
  }
  const values: any = state.form;

  if (values.id) {
    const { msg } = await putPage_news(values);
    showMsg(msg);
  } else {
    delete values.id;
    const { msg } = await postPage_news(values);
    showMsg(msg);
  }
}


async function onGetPage(id: number) {
  const { data } = await getPageInfo_news({ id });
  data.post = {
    id: data?.id ?? undefined,
    left_images: data?.left_images ?? [],
    left_title: data?.left_title ?? '',
    left_des: data?.left_des ?? '',
    right_top_images: data?.right_top_images ?? [],
    right_top_title: data?.right_top_title ?? '',
    right_top_des: data?.right_top_des ??'',
     right_bottom_images: data?.right_bottom_images ?? [],
    right_bottom_title: data?.right_bottom_title ?? '',
    right_bottom_des: data?.right_bottom_des ??'',
  };
  state.form = data.post;
  BasicFormApi.setValues({ ...state.form});
  state.pageThemeFiles = data.pageThemeFiles;
}

onMounted(async () => {
  if(index.value>0){
          await onGetPage(index.value);
  }
  
});
</script>

<template>
  <Page>
    <Card :title="`${routeTitle}详情`">
      
      <BasicForm />
    </Card>
  </Page>
</template>
